<template>
  <div class="father">
    <div class="btn-group">
      <div class="btn-group" role="group">
        <button type="button" class="btn btn-primary dropdown-toggle" data-bs-toggle="dropdown" aria-expanded="false">
          筛选
        </button>
        <ul class="dropdown-menu">
          <li @click="getShaixuan('one')"><a class="dropdown-item" href="#">自己</a></li>
          <li @click="getShaixuan('two')"><a class="dropdown-item" href="#">班级</a></li>
          <li @click="getShaixuanTwo('three')"><a class="dropdown-item" href="#">不看自己</a></li>
          <li @click="getMsg()"><a class="dropdown-item" href="#">不筛选</a></li>
        </ul>
      </div>
      <button @click="router.push('/edit')" class="btn btn-primary">编辑留言</button>
    </div>
    <div class="box">
  
      <div class="card" v-for="(item, index) in data.arr" :key="index">
        <div class="card-body">
          <h5 class="card-title" style="font-weight:700">{{ item.name }}</h5>
          <p class="card-text">{{ item.content }}</p>
          <div class="other">
            <i class="bi"
            :data-text=have(item.like)
            :class="{'bi-hand-thumbs-up-fill': myself(item.like),'bi-hand-thumbs-up': !myself(item.like)}"
            @click="liked(item.like,item.content)"
            ></i>
          </div>
        </div>
      </div>
      <!-- <div class="card" v-for="(item, index) in data.newArr" :key="index" v-show="data.isShow">
        <div class="card-body">
          <h5 class="card-title" style="font-weight:700">{{ item.name }}</h5>
          <p class="card-text">{{ item.content }}</p>
        </div>
      </div> -->
    </div>

  </div>



</template>

<script setup>
import { reactive } from "vue"
import axios from "axios";
import router from "../router";
//引入store钩子
import useCounterStore from '@/stores/counter.js'
//实现仓库数据双向绑定
import {storeToRefs} from 'pinia'


//创建仓库对象
const store=useCounterStore()
let {editArr}=storeToRefs(store)


const data = reactive({
  arr: "",

  newArr: JSON.parse(localStorage.getItem("newList")),

  isShow: true,

  isLike: "bi-hand-thumbs-up-fill",
  number: 0
})

// 控制点赞
const liked = (a,content)=> {
  // a.match(localStorage.getItem("token")) ? a.replace(localStorage.getItem("token"), "") : a+=localStorage.getItem("token")
  // let aaa = (a != null && a.match(localStorage.getItem("token"))) ? a.replace(localStorage.getItem("token"), "") : a+localStorage.getItem("token")
  let aaa
  if (a == null) {
    aaa = localStorage.getItem("token")
  }else {
    aaa = a.match(localStorage.getItem("token")) ? a.replace(localStorage.getItem("token"), "") : a+localStorage.getItem("token")
  }

  axios.get(`http://127.0.0.142:9001/test/liked.php?change=${aaa}&id=${content}`).then().catch(e=> {
    console.log(e);
  })

  switch(localStorage.getItem("who"))
  {
    case "one":
      getShaixuan('one')
        break;
    case "two":
      getShaixuan('two')
        break;
    case "three":
      getShaixuanTwo('three')
      break;
    case "other":
      getMsg()
  }
}

const getMsg = ()=> {
  axios.get("http://127.0.0.1:9001/test/message.php").then(re=> {
    console.log(re.data)
    data.arr = re.data

    data.isShow =true
    // editArr = re.data

    // re.data.map((item)=> {
    //   item.like != null && console.log(myself(item.like));
    // });

    localStorage.setItem("who", "other")

  }).catch(e=> {
    console.log(e)
  })
}

getMsg()

// 点赞数
const have = (str)=> {
  return str == null ? 0 : (str.match(/20194101/g) ? str.match(/20194101/g).length : 0)
  
}
const myself = (str)=> {
  return (str != null && str.match(localStorage.getItem("token"))) ? true : false
}

// 筛选
const getShaixuan = (item)=> {
  let a = item == "one" ? localStorage.getItem("token") : localStorage.getItem("token").slice(0, 10)
  axios.get(`http://127.0.0.1:9001/test/shaixuan_message.php?id=${a}`).then(re=> {
    // console.log(re.data)
    data.arr = re.data
    data.isShow =true

    localStorage.setItem("who", item)

  }).catch(e=> {
    console.log(e)
  })
}

// 筛选不看自己
const getShaixuanTwo = (i)=> {
  axios.get(`http://127.0.0.1:9001/test/bushaixuan_message.php?id=${localStorage.getItem("token")}`).then(re=> {
    console.log(re.data)
    data.arr = re.data

    data.isShow =false

    localStorage.setItem("who", i)

  }).catch(e=> {
    console.log(e)
  })
}

</script>

<style scoped>
.father {
  position: relative;
  width: 95%;
  margin: 0 auto;
}
.box {
  display: flex;
  justify-content: space-around;
  flex-wrap: wrap;
}
.father>.btn-group {
  position: absolute;
  top: -50px;
  right: 0;
}
.card {
  width: 275px;
  margin-bottom: 15px;
  position: relative;
  padding-bottom: 20px;
}

.other {
  position: absolute;
  right: 10px;
  bottom: 0;
}

.other i {
  cursor: pointer;
}
.other i:first-child::after {
  content: attr(data-text);
  width: inherit;
  height: 10px;
  font-style: normal;
  position: absolute;
  top: -18px;
  left: 50%;
  transform: translateX(-50%);
}


@media (max-width: 1024px) {
  .box {
    justify-content: center;
  }
  .father>.btn-group {
    position: static;
    margin: 0 0 20px 20px;
  }
}
@media (max-width: 428px) {
  .card{
    width: 88%;
  }
}

</style>